<template>
  <div class="auditlogPage cancelPadding secondary-page-mode">
    <div class="secondary-toolbar">
      <span>时间选择 : </span>
      <div class="layoutBox" style="width:242px">
        <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format='yyyy-MM-dd'></el-date-picker>
      </div>&emsp;&emsp;
      <span>审核人 : </span>
      <div class="layoutBox" style="width:120px">
        <el-select v-model="value"  placeholder="请选择">
          <el-option
            v-for="item in optionData"
            :key="item.value"
            :label="item.label"
            :value="item.label">
          </el-option>
        </el-select>
      </div>&emsp;&emsp;
      <span>断面名称/MN号: </span>
      <div class="layoutBox" style="width:200px">
        <el-input v-model="searchmessage"></el-input>
      </div>&emsp;&emsp;
      <el-button @click="search"><i class="iconfont icon-sousuo"></i>查询</el-button>
      <el-button @click="exportAudit" type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
    </div>
    <div class="currency-mode-wrap">
      <el-table
        :data="tableData"
        border
        style="height:calc(100% - 35px)">
        <el-table-column
          type="index"
          label="序号"
          :index="indexMethod"
          width="50">
        </el-table-column>
        <el-table-column
          prop="stationProvin"
          label="省份">
        </el-table-column>
        <el-table-column
          prop="stationCity"
          label="地市">
        </el-table-column>
        <el-table-column
          prop="stationCompany"
          label="运维单位">
        </el-table-column>
        <el-table-column
          prop="stationName"
          label="点位名称">
        </el-table-column>
        <el-table-column
          prop="stationDate"
          label="监测时间">
        </el-table-column>
        <el-table-column
          prop="auditOperation"
          label="审核操作">
        </el-table-column>
        <el-table-column
          prop="auditUser"
          label="审核人">
        </el-table-column>
        <el-table-column
          prop="auditDate"
          label="审核时间">
        </el-table-column>
        <el-table-column
          prop="auditReason"
          label="审核原因">
        </el-table-column>
      </el-table>
      <div class="paginationBox">
        <el-pagination
          @size-change="paginationSizeChange"
          @current-change="paginationChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          background
          :small = "true"
          popper-class = "select-common-option"
          :page-sizes = "pageList"
          layout="total,sizes,slot,->,prev, pager, next, jumper"
          :total="totalRecords">
          <span class="el-pagination__current">当前第{{currentPage}}/{{totalPage}}页</span>
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "",
    data() {
      return {
        dateRange: [],
        value:'',
        optionData: [
          { value: 1, label: "运维人员" },
          { value: 2, label: "省级审核" },
          { value: 3, label: "驻站审核" },
        ],
        selectCheck: [],
        tableData: [],
        searchmessage: "",
        currentPage: 1, //分页组件当前页
        pageSize: 10, //分页每页多少条数据
        totalRecords: 0, //总条数
        pageList: [10, 15, 20] //设置每页多少条
      };
    },
    created() {
      this.setDate();
      this.getTableData();
    },
    methods: {
      setDate(){
        let d = new Date().setDate(new Date().getDate() - 7);
        let date = new Date(d).format("yyyy-MM-dd");
        this.dateRange = [date, new Date().format("yyyy-MM-dd")];
      },
      paginationChange(val) {
        //分页页码改变时执行
        this.currentPage = val;
        this.getTableData()
      },
      paginationSizeChange(val) {
        //分页pageSize改变时执行
        this.pageSize = val;
        this.getTableData()
      },
      selectChange(arr) {
        this.selectCheck = arr;
      },
      indexMethod(index) {
        return index + 1;
      },
      //导出
      exportAudit(){
        let startTime = this.dateRange[0] + ' 00:00:00';
        let endTime = this.dateRange[1] + ' 23:59:59';
        let auditOperation = this.value;
        let mn = this.searchmessage;
        window.open("/DataAudit/export/auditRecordExport?startTime="+startTime+"&endTime="+endTime+
              "&mn="+mn+"&auditOperation="+auditOperation);
      },
      //查询
      search(){
        this.getTableData()
      },
      getTableData(){
        this.$http.post('/DataAudit/dataAudit/dataAuditRecordPage',{
          "startTime":this.dateRange[0] + ' 00:00:00',
          "endTime":this.dateRange[1] + ' 23:59:59',
          "auditOperation":this.value,
          "mn":this.searchmessage,
          "page":true,
          "pageObject":{
            "pageNumber":this.currentPage,
            "pageSize":this.pageSize
          }
        }).then((res)=>{
          if(res.data.code == 0){
            this.tableData=res.data.content.dataList;
            this.totalRecords=res.data.content.totalRecords;
          }
        })
      }
    },
    computed: {
      totalPage() {
        let number = 0;
        number = Math.ceil(this.totalRecords / this.pageSize);
        return number;
      },

    },

  };
</script>

<style scoped lang="less">
  .auditlogPage {
    height: 100%;
  }
</style>
